<template>
	<!-- 页面内容--删除个人数据 删除数据 页面 -->
	<view style="width: 100vw; min-height: 100vh;background-color: #1F2022; color: #fff;">
		<formheadVue headname="NeoLoan " :pagenum='5' :showback='true'></formheadVue>
		<view class="P-head">
			<view class="P-1 flexcenter">
				<image src="/static/delete.png" mode=""></image>
			</view>
			<view class="P-2">
				<p class="header">{{$t('delete.title')}}</p>
				<p>{{$t('delete.tipsone')}}</p>
				<p>{{$t('delete.tipstwo')}}</p>
				<p>{{$t('delete.tipsthree')}}</p>
				<p>{{$t('delete.tipsfour')}}</p>
			</view>
			<view @click="opentips()" class="P-3 flexcenter">
				<p>{{$t('delete.confirmdelete')}}</p>
			</view>
			<view class="P-4">
				<view class="P-4-1 flexrowstart">
					<image src="../../static/customerInfo.png" mode=""></image>
					<p>
						{{$t('delete.phone')}}
					</P>
				</view>
				<view v-if="custInfo.qsxs">
					<p v-for="(item,index) in custInfo.qsxs" :key="index" class="P-4-2 brightcolor">
						<span v-if="currentlang=='es'">+52 {{item.cjfu}}</span>
						<span v-else>+66 {{item.cjfu}}</span>
					</p>
				</view>

				<view v-if="custInfo.nnkh">
					<p v-for="(item,index) in custInfo.nnkh" :key="index" class="P-4-3" style="margin-top: 20rpx;">
						{{$t('delete.emial')}} <span class="brightcolor"
							style="margin-left: 10rpx;">{{item.cjfu}}</span>
					</p>
				</view>
				<view v-if="custInfo.uskb" v-for="(item,index) in custInfo.uskb" :key="index">
					<p class="P-4-3">Line：<span class="brightcolor" style="margin-left: 10rpx;">
							{{item.cjfu}}</span>
					</p>
				</view>
				<view v-if="custInfo.ibrc" v-for="(item,index) in custInfo.ibrc" :key="index">
					<p class="P-4-3">Facebook：<span class="brightcolor" style="margin-left: 10rpx;">
							{{item.cjfu}}</span>
					</p>
				</view>
				<p class="P-4-3 flexcenter" style="width: 100%; box-sizing: border-box;font-size: 12px;">9:00 AM TO
					18:00 PM</p>
			</view>
		</view>
		<uni-popup ref="deleteTipsPopup" type="center" :animation="false" :is-mask-click="false">
			<view class="deleteTipsPopup">
				<p>
					{{$t('detete.tips')}}
				</p>
				<view class="quit-btn flexrowspacebetween">
					<p @click="deleteconfirm">{{$t('index.confirm')}}</p>
					<p @click="quitcancel">{{$t('index.cancel')}}</p>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="deleteSuccessPopup" type="center" :animation="false" :is-mask-click="false">
			<view class="deleteSuccessPopupbox flexcenter">
				<view class="deleteSuccessPopup">
					<view class="flexcenter">
						<image src="../../static/deletesuccess.png" mode=""></image>
					</view>
					<p style="color: #9D29D8; width: 100%; text-align: center;font-size: 38rpx;">
						{{$t('detete.deletesuccess')}}
					</p>
					<p style="font-size: 14px;
					text-align: center;
					background-color:#ECECEC ;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-top: 30rpx;
					">
						{{$t('detete.deletesuccesstips')}}
					</p>
					<view class="quit-btn flexcenter">
						<p @click="deleteconfirm">OK ( {{voiceCountdown}} S )</p>
					</view>
				</view>
				<u-icon @click="closePopup()" class="iconposition" name="close-circle-fill" color="#D8D8D8"
					size="24"></u-icon>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import setDot from '@/pages/utils/setdot.js';
	import formheadVue from '../../components/formhead.vue';
	import api from '@/pages/utils/api.js'
	import setfengkongDot from '@/pages/utils/fengkong.js';
	import getDroupMeunFun from '@/pages/utils/getDroupMeun.js'
	export default {
		data() {
			return {
				voiceCountdown: 0,
				timer: null,
				custInfo: {},
				currentlang: 'th',
			}
		},
		components: {
			formheadVue
		},
		onShow() {
			this.currentlang = uni.getLocale()
			api.getcustInfo({}).then((data) => {
				this.custInfo = data
				console.log('拿到的客服信息', this.custInfo);
			})
		},
		methods: {
			closePopup() {
				console.log('点击了');
				this.deleteconfirm()
				this.$refs.deleteTipsPopup.close()
			},
			opentips() {
				this.$refs.deleteTipsPopup.open('center')
			},
			quitcancel() {
				this.$refs.deleteTipsPopup.close()
			},
			quitconfirm() {
				this.$refs.deleteTipsPopup.close()
				this.fn1()
			},
			fn1() {
				this.$refs.deleteSuccessPopup.open('center');
				this.voiceCountdown = 20;

				const VoiceCountdownTimer = () => {
					if (this.voiceCountdown <= 0) {
						this.deleteconfirm(); // 注意要加 this
						return;
					}
					this.voiceCountdown--;
					console.log('定时器', this.voiceCountdown);
					this.timer = setTimeout(VoiceCountdownTimer, 1000); // 保存定时器 ID
				};

				VoiceCountdownTimer();
			},
			deleteconfirm() {
				console.log('执行了删除后退出登陆的方法');
				if (this.timer) {
					clearTimeout(this.timer); // 清除定时器
					this.timer = null;
				}
				clearTimeout(this.timer);
				uni.removeStorageSync('kjxy')
				uni.removeStorageSync('appSsid')
				uni.removeStorageSync('userId');
				uni.removeStorageSync('token');
				uni.removeStorageSync('newUser');
				uni.removeStorageSync('phoneNo');

				// #ifdef APP-PLUS
				plus.runtime.quit();
				// #endif

				// #ifdef H5
				uni.navigateTo({
					url: '/pages/demo1/demo1',
					animationType: 'slide-in-right',
					animationDuration: 200
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deleteTipsPopup {
		width: 80vw;
		height: fit-content;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #222;
		border-radius: 30rpx;

		.quit-btn p {
			width: 44%;
			text-align: center;
			padding: 14rpx 10rpx;
			border-radius: 30rpx;
			border: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			margin-top: 30rpx;
		}

		.quit-btn p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.quit-btn p:nth-child(1) {
			background-color: #B6B6B6;
		}

		.quit-btn p:nth-child(2) {
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			background: linear-gradient(to right, #7F7FD5, #86A8E7);
			color: #fff;
		}

	}

	.deleteSuccessPopupbox {
		width: 100%;
		padding-top: 70rpx;
		position: relative;

		.iconposition {
			position: absolute;
			top: 0rpx;
			right: 10rpx;
		}
	}

	.deleteSuccessPopup {
		width: 80vw;
		height: fit-content;
		background-color: #fff;
		padding: 40rpx;
		box-sizing: border-box;
		color: #464646;
		border-radius: 20rpx;

		image {
			width: 240rpx;
			height: 240rpx;
		}

		.quit-btn p {
			width: 88%;
			text-align: center;
			padding: 14rpx 10rpx;
			border-radius: 30rpx;
			border: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			margin-top: 30rpx;
		}

		.quit-btn p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.quit-btn p:nth-child(1) {
			background-color: #FFF584;
			color: #000;
		}

	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: -110rpx;
	}

	.P-1 {
		margin-top: 60rpx;
		margin-bottom: 30rpx;

		image {
			width: 190rpx;
			height: 180rpx;
		}
	}

	.P-4 {
		margin: 0rpx 10rpx;
		background-image: url('../../static/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 480rpx;
		padding: 30rpx;

		.P-4-1 {
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;
			}
		}

		.brightcolor {
			color: #BCA3F3;
		}

		.P-4-2 {
			font-size: 38rpx;
			width: 100%;
			text-align: center;
			text-decoration: underline;
			padding: 20rpx 0;
			border-bottom: 3rpx solid #6F5F8D;
		}

		.P-4-3 {
			padding: 0rpx 0rpx;
			line-height: 2;
			font-size: 14px;
			color: #D9D9D9;
		}
	}

	.P-3 {
		width: 100%;
		margin: 40rpx 0rpx;

		p {
			width: 86%;
			height: 90rpx;
			background-color: #D8D8D8;
			text-align: center;
			color: #000;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			// animation: pulsebtn 1.2s ease-in-out infinite;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		@keyframes pulsebtn {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.08);
			}

			100% {
				transform: scale(1);
			}
		}

	}

	.P-2 {
		margin: 0 10rpx;
		font-size: 12px;
		background-color: #393A3D;
		border-radius: 20rpx;
		padding: 30rpx;

		p {
			line-height: 2;
			color: #C8C8C8;
		}

		.header {
			color: #fff;
		}
	}


	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
</style>